@use "sass:color";
@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

@use "_mixins" as *;

/*-------------------------------------------------------------------------.
|  _____     _            ___      ___        _   _                        |
| |_   _|_ _| |__  ___   ( _ )    / _ \ _ __ | |_(_) ___  _ __  ___        |
|   | |/ _` | '_ \/ __|  / _ \/\ | | | | '_ \| __| |/ _ \| '_ \/ __|       |
|   | | (_| | |_) \__ \ | (_>  < | |_| | |_) | |_| | (_) | | | \__ \       |
|   |_|\__,_|_.__/|___/  \___/\/  \___/| .__/ \__|_|\___/|_| |_|___/       |
|                                      |_|                                 |
+--------------------------------------------------------------------------+
| The navi table contains the tab navigation above the content tables      |
| containing the buttons "filter", "commands", "display" and so on.        |
'-------------------------------------------------------------------------*/

table.filterform {
  padding: 0;
  border-collapse: collapse;
  border-style: none;

  td {
    padding: 0;
  }
}

div.floatfilter {
  width: 333px;
  padding: 4px;
  padding-left: 10px;
  margin: 0 5px 5px 0;
  color: $font-color;
  background-color: $bg-color-secondary;

  .legend {
    width: 100%;
    height: 17px;
    padding: 5px 8px;
    padding-left: 0;
    font-weight: $font-weight-bold;
    color: $font-color;
    background-color: $floatfilter-bg-color;

    span {
      padding-bottom: 3px;
      border-bottom: $floatfilter-legend-border;
    }
  }

  .content {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    text-align: left;

    > select {
      width: 100%;
      padding: 0 8px;
      line-height: 18px;
      box-sizing: border-box;

      &.neg,
      &#opthost_group,
      &#optservice_contact_group,
      &#opthost_contact_group,
      &#optservice_group {
        width: 237px;
      }
    }

    .multigroup {
      table {
        margin-top: -3px;
      }

      select {
        width: 150px;
        height: 66px;
      }
    }

    .filtertime select {
      width: 136px;
    }

    select {
      box-sizing: border-box;
    }

    .checkbox {
      display: inline-block;
      margin: 3px 0;

      &:not(:last-of-type) {
        margin-right: 8px;
      }
    }

    input,
    select,
    textarea,
    #mk_side_search_field {
      margin-bottom: 0;
    }

    input[type="text"] {
      width: calc(100% - 12px); // subtract padding

      &.number {
        text-align: center;
      }

      &.neg {
        width: 229px;
      }
    }

    input.neg[type="text"] {
      position: relative;
      top: -1px;
      width: 237px;
    }

    input[type^="radio"],
    select[type^="radio"],
    textarea[type^="radio"],
    [type^="radio"]#mk_side_search_field {
      width: auto;
      margin-bottom: 0;
    }

    input[type="radio"] {
      margin-left: 5px;
    }

    .radiobutton_group {
      display: inline-block;

      input[type="radio"] {
        margin-left: 0;
      }

      &:not(:last-of-type) label {
        margin-right: 5px;
      }
    }

    .valuespec_tuple {
      width: 100%;
      border-spacing: 2px 2px;
    }

    nobr {
      margin-left: 4px;
    }

    table {
      border-spacing: 0;

      td {
        padding: 0 4px 4px 0;
      }
    }
  }

  &.service_custom_variable,
  &.host_custom_variable {
    .select2-container {
      max-width: 52%;
    }

    input[type="text"] {
      display: inline-block;
      width: 40%;
      margin-left: 4px;
    }
  }

  table.vs_duallist {
    width: 300px;
    border-spacing: 0 3px;

    a.control {
      padding: 0 6px;
    }

    select {
      height: 43px;
      padding: 0;
      margin-bottom: 0;
    }
  }

  &.invswpac_version,
  &.invswpac_package_version {
    input.text {
      margin-left: 4px;
    }
  }

  div.service_level {
    display: block;
    float: left;
    margin: 0 8px 2px 0;

    .select2-container {
      margin-left: 4px;
    }
  }

  &.downtimes span.checkbox {
    white-space: normal;
  }

  span.select2 {
    position: relative;
  }

  > div.content > span.select2:last-child {
    width: 100%;
  }

  &.double {
    &.log_class .content,
    &.log_state .content {
      table {
        border-spacing: 6px 0;

        &.alertstatefilter {
          td {
            vertical-align: top;
          }

          .checkbox {
            margin: 3px 3px 0 0;
          }
        }
      }

      .checkbox {
        margin-bottom: 4px;
      }
    }

    &.log_class .content table td {
      padding-bottom: 6px;
    }

    &.log_state .content table td {
      line-height: 20px;
    }
  }

  &.svchardstate .content,
  &.svcstate .content {
    .checkbox:not(:last-of-type) {
      margin-right: 8px;
    }

    input[type="checkbox"] + label::before {
      margin: 0 4px 0 0;
    }
  }

  &.invswpac .content span.radiobutton_group {
    display: inline;
  }

  .select2-container .select2-selection--single {
    height: 22px;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 20px;
  }

  span.select2-selection {
    border-color: $input-dropdown-border-color;
  }

  &.rangespec table.valuespec_tuple {
    width: 100%;

    span.title {
      top: 7px;
    }

    input {
      padding: 3px;
    }
  }

  &.address_families {
    span.radiobutton_group {
      margin-bottom: 4px;
    }
  }

  &.host_address,
  &.host_ipv4_address,
  &.host_ipv6_address {
    input[type="text"] {
      margin-bottom: 8px;
    }
  }

  &.invswpac {
    div.content > input[type="text"] {
      margin-bottom: 8px;
    }

    span.min_max_row {
      display: inline-block;
      margin: 8px 0;
    }
  }

  table.valuespec_listof.filter &[class$="_labels"] {
    @include label-groups-mixin; // from _main.scss

    &,
    div#page_menu_popups div.side_popup form & {
      width: 348px;
      padding-right: 0;
    }

    div.label_group select[id$="_vs"] + span.select2-container--default {
      width: auto !important;
      max-width: $label-filters-label-max-width;
    }
  }
}

div.flex_break {
  flex-basis: 100%;
  height: 0;
}

/* Specific styling for side popup floatfilters that are contained in a ListOf() */
div.side_popup_content table.valuespec_listof.filter {
  td.vlof_buttons {
    width: 0;
    vertical-align: top;

    a.delete_button img {
      position: absolute;
      margin-top: 4px;
      right: $simplebar-track-width;
      z-index: 5;
      width: 12px;
      height: 12px;
    }
  }

  td.vlof_content {
    position: relative;
    left: -4px;
  }

  > tbody > tr {
    position: relative;
  }
}

select.vlof_filter {
  width: 312px;
}

table.nform table.valuespec_listof {
  border-spacing: 0;

  > tbody > tr {
    vertical-align: middle;
  }

  .vlof_content,
  .vlof_buttons {
    border-bottom: 1px solid $line-color;
  }

  .vlof_content {
    padding: $spacing-half 0 0;
    vertical-align: top;

    .valuespec_tuple {
      border-spacing: 8px;
    }

    .content nobr {
      display: inline-block;
      margin-top: 8px;
    }
  }

  .vlof_buttons {
    width: 44px;
    min-width: 44px;
    padding-right: $spacing-half;
    text-align: center;
    vertical-align: middle;

    img {
      width: 12px;
      height: 15px;
    }

    a:not(:last-child) {
      margin-right: $spacing-half;
    }
  }
}

table.filtertime td {
  vertical-align: middle;
}

div.view_form {
  margin-bottom: 10px;
}

/*-------------------------------------------------------------------------.
|                _                            _                            |
|               | |    __ _ _   _  ___  _   _| |_ ___                      |
|               | |   / _` | | | |/ _ \| | | | __/ __|                     |
|               | |__| (_| | |_| | (_) | |_| | |_\__ \                     |
|               |_____\__,_|\__, |\___/ \__,_|\__|___/                     |
|                           |___/                                          |
+--------------------------------------------------------------------------+
| Styles used by layouts of the views (plugins/views/layouts.py)           |
'-------------------------------------------------------------------------*/

td.gap,
table.data .checkbox_hover.gap {
  width: 5px;
}

/* boxed layout */
table.boxlayout {
  border-spacing: 0;

  td.boxcolumn {
    padding-right: $spacing;
    vertical-align: top;

    &:last-child {
      padding-right: 0;
    }
  }
}

/* tiled layout */
.tile {
  float: left;
  width: 180px;
  margin-right: 6px;
  margin-bottom: 6px;

  img.icon {
    width: 16px;
    height: 16px;
  }

  table {
    width: 100%;
    height: 70px;
  }

  td {
    font-size: $font-size-small;
    border-style: none;

    &.tl,
    &.bl {
      text-align: left;
    }

    &.tr,
    &.br {
      text-align: right;
    }

    &.center {
      vertical-align: middle;
    }

    &.center,
    &.cont {
      text-align: center;
    }

    &.bl,
    &.br {
      vertical-align: bottom;
    }

    &.bl,
    &.br,
    &.tl,
    &.tr {
      height: 20px;
    }
  }
}

table.data.tiled td.tiles {
  padding: 0;

  div.tile {
    width: 240px;
    padding: 4px;
    background: $bg-color-secondary;
    border-radius: $theme-border-radius;
    box-shadow: none;

    table {
      border-spacing: 4px 8px;

      td {
        padding: 8px;

        &.state {
          height: 30px;
          padding: 0;
        }

        &.states {
          border-radius: $theme-border-radius;
        }

        &.center {
          white-space: break-spaces;
          overflow-wrap: anywhere;
        }
      }
    }

    .cont {
      box-sizing: border-box;
    }
  }
}

/*
 LAYOUT: dataset
 The dataset layout is used to display detailed information
 about a single host/service on a page. e.g. the "host details"
 page uses thislayout
*/
table.data.single {
  padding: 0;
  margin-top: 5px;
  border-collapse: collapse;
  border-spacing: 1px;
  empty-cells: show;

  tr.data {
    > td {
      padding: 4px 5px 2px;
      padding-bottom: 4px;
      line-height: 14px;
      text-align: left;
    }

    td.left {
      width: 1%;
      padding: 2px 20px 2px 16px;
      white-space: nowrap;
    }

    td:not(.left) {
      width: auto;
    }
  }

  > tbody > tr > td,
  > tbody tr.odd0 > td,
  > tbody tr.even0 > td {
    padding: 2px;
    border-radius: 0;

    &.left {
      font-weight: $font-weight-bold;
      transition: 0.15s ease-in-out;
    }

    &.perfometer {
      padding-right: 0;
    }
  }

  td {
    &.gap {
      background-color: transparent;
      border-right-style: none;
      border-left-style: none;
    }

    &.perfometer div.glass {
      width: 100%;
    }
  }
}

table.data.matrix {
  width: auto;
  margin-bottom: 10px;

  tbody > tr.data {
    > td {
      padding: 8px;

      &.left {
        font-weight: $font-weight-bold;
        background-color: $bg-color-secondary;
        transition: 0.15s ease-in-out;
      }

      &.cell td.perfometer {
        div.title,
        div.content {
          padding: 0;
        }
      }
    }

    &:first-child {
      background: transparent;

      td.matrixhead {
        letter-spacing: $letter-spacing-table;
        text-transform: uppercase;
      }
    }
  }

  td.minority {
    &,
    a,
    a:link {
      color: $font-color-light-bg;
    }
  }

  tr.even0 td.minority {
    background-color: color.adjust($table-highlight-color, $lightness: 5%);
  }

  tr.odd0 td.minority {
    background-color: $table-highlight-color;
  }

  tr.even0,
  tr.odd0 {
    tbody & td.matrixhead {
      font-weight: $font-weight-bold;
      color: $font-color;
    }
  }

  td.cell {
    padding: 0;

    table {
      width: 100%;
      padding: 0;
    }
  }
}

/*-------------------------------------------------------------------------.
|              _____    _ _ _           _                                  |
|             | ____|__| (_) |_  __   _(_) _____      __                   |
|             |  _| / _` | | __| \ \ / / |/ _ \ \ /\ / /                   |
|             | |__| (_| | | |_   \ V /| |  __/\ V  V /                    |
|             |_____\__,_|_|\__|   \_/ |_|\___| \_/\_/                     |
|                                                                          |
+--------------------------------------------------------------------------+
| Styles used while editing a view in the view editor                      |
'-------------------------------------------------------------------------*/

div.clear {
  clear: left;
}

input#try {
  float: left;
}

/* Availability */
table.data.availability {
  td.number {
    width: 60px;
  }

  tr.summary td {
    font-weight: $font-weight-bold;
  }

  tr.odd0 td.number.stats {
    opacity: 0.5;
  }

  td.state span {
    font-weight: $font-weight-default;
  }
}

table.data td.flapping,
table.timeline td.flapping,
div.avlegend.timeline div.state.flapping {
  background-color: $flapping;
}

table.data td.downtime,
table.timeline td.downtime,
div.avlegend.timeline div.state.downtime {
  background-color: $downtime;
}

table.data tr.data > td.hostdown,
table.timeline td.hostdown,
div.avlegend.timeline div.state.hostdown {
  color: $font-color-white;
  background-color: $hostdown;
}

table.data tr.data td.unmonitored span,
table.timeline td.unmonitored,
div.avlegend.timeline div.state.unmonitored {
  color: $font-color-black;
  background-color: $color-state-4-background;
}

table.data.availability tr td {
  &.unmonitored {
    background-color: $color-state-4-background;
  }

  &.hostdown {
    background-color: $hostdown;
  }
}

table.timeline td.ooservice,
div.avlegend.timeline div.state.ooservice {
  color: $font-color-black;
  background-color: $middarkgrey;
  background-image: url("images/ooservice.png");
  background-repeat: repeat;
}

table.timeline td.chaos,
div.avlegend.timeline div.state.chaos {
  color: $font-color-white;
  background-color: $chaos;
}

table.data tr.data > td.timeline {
  width: 500px;
  padding: 0;
}

table.timeline {
  height: 30px;
  border-collapse: collapse;
  border-spacing: 0;

  &.low {
    height: 5px;
    margin-top: -18px;
    border-collapse: collapse;
    border-spacing: 0;
  }

  &.standalone {
    width: 100%;
    margin-bottom: 20px;
  }

  &.inline {
    width: 500px;
  }

  td {
    padding: 0;
    border-style: none;

    &.hilite,
    &.hilite.state2 {
      padding: 0;
      border: $timeline-hilite-border;
      filter: brightness(80%);
    }
  }
}

div.sla_timerange {
  width: 100%;
}

div.timelinerange {
  position: relative;
  float: none;
  width: 100%;

  div {
    float: left;
    width: 50%;

    /* We render the small vertical lines in a way that only
       the left border is visible but the thing is thick 5 pixels.
       That makes hovering over it more easy. */
    &.timelinechoord {
      position: absolute;
      top: 0;
      width: 5px;
      height: 30px;
      border-color: $color-table-border-dark;
      border-style: none none none solid;
      border-width: 0 0 0 1px;
    }

    &.until {
      float: right;
      text-align: right;
    }
  }

  &.inline {
    width: 500px;
  }
}

table.timelineevents {
  width: 100%;
}

table.data.oddeven.timelineevents > tbody > tr.hilite {
  background-color: $timetable-hilite-bg-color;
}

.timelinerange .from,
.timelinerange .until {
  display: inline-block;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: $font-size-small;
  letter-spacing: $letter-spacing-table;
}

.timelinerange .timeline {
  box-shadow: none;
}

// Timewarping table for BI availability timelines
table.data.timewarp {
  width: 100%;
  margin-bottom: 20px;
}

div.avlegend {
  padding: 5px 15px;
  margin-top: 10px;
  text-align: right;
  background-color: $headline-color;
  border-radius: 5px;

  h3 {
    margin-top: 0;
  }

  div {
    display: inline-block;
    margin-right: $spacing-half;
    white-space: nowrap;

    &.state {
      padding: 2px 0;
      text-align: center;

      span {
        padding: 2px $spacing-half;
        border-radius: $theme-border-radius;
      }
    }

    &:last-child {
      margin-right: 0;
    }
  }

  &.levels div.level,
  &.timeline div {
    &:not(:last-child) {
      margin-right: $spacing;
    }
  }
}

/*--Inventory--------------------------------------------------------------.
|            ___                      _                                    |
|           |_ _|_ ____   _____ _ __ | |_ ___  _ __ _   _                  |
|            | || '_ \ \ / / _ \ '_ \| __/ _ \| '__| | | |                 |
|            | || | | \ V /  __/ | | | || (_) | |  | |_| |                 |
|           |___|_| |_|\_/ \___|_| |_|\__\___/|_|   \__, |                 |
|                                                   |___/                  |
+--------------------------------------------------------------------------+
| Styles for displaying HW/SW Inventory data                               |
'-------------------------------------------------------------------------*/

td.invtree {
  width: 100%;

  ul.treeangle {
    margin: 0;
    margin-bottom: 3px;
  }

  table {
    margin-top: 3px;
    border-collapse: collapse;
  }

  table td,
  table th {
    height: 14px;
    padding: 1px 5px;
    border: 1px solid $color-table-border;
  }

  table th {
    text-align: left;
  }

  table td {
    background-color: $white;
  }

  table.data.single tr.data & table,
  table.data.table tr.data & table {
    margin: 8px 0 12px;
    box-shadow: none;

    th,
    td {
      height: 14px;
      padding: 2px 6px;
      background-color: $nested-table-td-bg-color;

      &.inactive_cell {
        background-color: $nested-table-td-inactive-bg-color;

        > span {
          color: $font-color;
          opacity: $inactive-opacity;
        }
      }
    }

    th {
      color: $font-color;
      background-color: $nested-table-th-bg-color;
    }
  }

  /* Make td class of invtree more specific, when shown in single dataset mode */
  table.data.single & td.number {
    text-align: right;
  }
}

td.invtree span.invold,
span.invold table.data {
  color: $font-color-red;
}

td.invtree span.invnew,
span.invnew table.data {
  color: $font-color-green;
}

/* Positioning of the link from an inventory dicttable to the matching multisite table */
div.invtablelink {
  position: absolute;
  top: -17px;
  right: 1px;
}

td.if_state {
  width: 50px;
  text-align: center;
  box-shadow: none;
}

table.data.single tr.data td.invtree table td.if_state,
table.data tr.data td.if_state {
  &.if_state_up {
    color: $font-color-black;
    background-color: $color-state-success-background;
  }

  &.if_state_down {
    color: $font-color-white;
    background-color: $color-state-2-background;
  }

  &.if_state_other {
    background-color: $color-state-9-background;
  }

  &.if_available {
    color: $font-color-black;
    background-color: $color-state-success-background;
  }

  &.if_not_available {
    color: $font-color-black;
    background-color: $color-state-4-background;
  }
}

table.data.headerleft.sla {
  tbody tr {
    th {
      width: 240px;
      padding: 0.5 * $spacing;

      &.sla_state {
        width: 30px;
      }
    }

    td {
      &,
      &.sla {
        padding: 0.5 * $spacing $spacing;
      }

      &.sla_duration {
        padding-right: 0.5 * $spacing;
        text-align: right;
      }

      &.sla_output {
        width: 70%;
        padding-left: 0.5 * $spacing;
      }

      table.timeline.standalone,
      &.sla table.timeline.standalone {
        margin-bottom: 0;
      }

      &.sla_spec table {
        margin: 0;
        border: none;
        border-spacing: 0;

        tbody tr td {
          padding-left: 0;

          &.title {
            width: 280px;
            font-weight: $font-weight-bold;
          }

          table tbody tr td {
            padding: 0;
          }
        }
      }
    }

    th.sla_date,
    td.sla_date {
      width: 120px;
      padding-right: 0.5 * $spacing;
    }
  }

  a,
  body.main .popup_menu span,
  body.main .popup_menu & span {
    color: $font-color;
    text-decoration: underline;
  }
}

.sla table.timeline {
  &.standalone.sla {
    td {
      padding: 0;
    }

    &.period {
      height: 10px;
    }
  }

  td.state0,
  td.state1,
  td.state2 {
    &.odd {
      opacity: 0.5;
    }
  }
}

table.data tr.data.sla_horizontal_line > td.sla_horizontal_line {
  height: 1px;

  &.black {
    border-bottom: 1px solid $font-color;
  }
}

table.timeline.sla td.sla_hilite,
table.data.oddeven > tbody > tr.sla_hilite {
  padding: 0;
  border-style: none;
  filter: brightness(70%);

  &.sla_error_hilite {
    filter: brightness(50%);
  }
}

div#avoptions td {
  &.dictleft {
    width: 99%;
  }

  &.dictright {
    padding-right: 4px;
  }
}

/*
 * TODO: Refactor into a single style for nested tables
 */
td.sla_spec table table,
td.agent_config table.rulesets table,
table.data tr.ac_test_details table,
table.data tr.notification_context table,
td.rule_conditions table {
  margin-top: 3px;
  border-collapse: collapse;
}

td.agent_config table.rulesets table td,
table.data tr.ac_test_details table td,
table.data tr.notification_context table td,
table.data tr.notification_context table th,
td.rule_conditions table td {
  height: 14px;
  padding: 1px 5px;
  border: 1px solid $color-table-border;
}

td.sla_spec table td.title,
td.agent_config table.rulesets table td.title,
table.data tr.notification_context table th {
  color: $font-color;
  text-align: left;
}

td.agent_config table.rulesets table td,
table.data tr.ac_test_details table td,
table.data tr.notification_context table td,
td.rule_conditions table td {
  background-color: $nested-table-td-bg-color;
}

td.agent_config table.rulesets table td.title,
table.data tr.notification_context table th,
td.rule_conditions table td.title {
  background-color: $nested-table-th-bg-color;
}

table.agents tbody > tr {
  &.data > td {
    vertical-align: top;

    &.agent_config {
      min-width: 50%;
    }

    &.agent_download {
      text-align: center;
      font-size: $font-size-small;
      width: 66px;

      img {
        margin-bottom: 3px;
      }
    }
  }

  th.header_agent_download,
  td.agent_download:not(.state):not(.hstate) {
    text-align: center;
    padding: 2px 4px;
  }
}

td.agent_config table.rulesets td {
  vertical-align: top;

  table {
    td {
      padding: 4px 8px;
      vertical-align: top;

      td.title {
        height: auto;
        color: $font-color;
        background-color: $agent-config-inner-title-bg-color;
      }

      table tbody tr td {
        padding: 1px 6px;
      }
    }
  }
}

span.muted_text {
  color: $font-color-dimmed;
}
